<template>
    <Header title="第四章 尺寸" />
    <div class="w-full p-4 bg-white shadow-sm">
        <Section title="宽度width">
            <p class="mb-2">用于控制元素的宽度。</p>
            <ul class="space-y-2 text-center font-bold text-white">
                <li class="bg-sky-400 py-2 mb-2 w-24 rounded-xl">w-24</li>
                <li class="bg-sky-400 py-2 mb-2 w-1/2 rounded-xl">w-1/2</li>
                <li class="bg-sky-400 py-2 mb-2 w-sm rounded-xl">w-sm</li>
                <li class="bg-sky-400 py-2 mb-2 w-full rounded-xl">w-full</li>
                <li class="bg-sky-400 py-2 mb-2 w-3xl rounded-xl">w-3xl</li>
            </ul>
        </Section>
        <Section title="min-width">
            <p class="mb-2">用于设置元素最小宽度。</p>
            <ul class="space-y-2 text-center font-bold text-white">
                <li class="min-w-80 rounded-lg bg-sky-500 px-4 py-2">
                    min-w-80
                </li>
                <li class="min-w-3/4 rounded-lg bg-sky-400 px-4 py-2">
                    min-w-3/4
                </li>
            </ul>
        </Section>
        <Section title="max-width">
            <p class="mb-2">用于设置元素最大宽度。</p>
            <ul class="space-y-2 text-center font-bold text-white">
                <li class="w-full max-w-96 rounded-lg bg-sky-500 px-4 py-2">
                    max-w-96
                </li>
                <li class="w-full max-w-3/4 rounded-lg bg-sky-400 px-4 py-2">
                    min-w-3/4
                </li>
                <li class="w-full max-w-2xl rounded-lg bg-sky-400 px-4 py-2">
                    max-w-lg
                </li>
            </ul>
        </Section>
    </div>
</template>

<script setup>
import Header from "../../components/title";
import Section from "../../components/section";
</script>

<style></style>
